<!DOCTYPE html>
<html>
<head>
<title>FontScroll.js--文字行向上滚动插件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,div,p,ul,table,li{margin:0;padding:0;}
ul li{list-style:none;}
#FontScroll{width:500px;height:90px;line-height:29px;border:1px solid green;overflow:Hidden;margin:10px;}
#FontScroll ul{text-align:center;width:100%;}
#FontScroll ul li{border-bottom:1px dotted red;}
#FontScroll .fontColor {color:red;background-color:aqua;}


</style>
<script src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src='fontscroll_v1.0.0.js'></script>
<script type="text/javascript">
var demo = null;
$(function(){
	/**
	 * 初始化FontScroll
	 * @target 选择器，选择滚动区域ul外层的div
	 * @options 参数：
	 * 		time：每次滚动的时间间隔(单位：毫秒)，默认3000
	 * 		speed：滚动动画时间(单位：毫秒)，数值越小滚动动画速度越快，默认500
	 * 		rowClass：滚动选中行的样式，默认：fontColor
	 * 		num：滚动选中的行序号，默认：0 表示第一行
	 * 		skip：滚动时上面留白显示的行数，默认0
	 * 		pauseOnHover：鼠标经过时是否暂停，默认：true
	 *		startOnInit：初始化后是否自动运行，默认：true
	 * 		init: 是否默认初始化，默认true。默认初始化会给开始行添加rowClass。
	 */
    demo = new FontScroll('#FontScroll', {
		time: 1000,//每次滚动的时间间隔(单位：毫秒)，默认3000
		speed: 500,//滚动动画时间(单位：毫秒)，数值越小滚动动画速度越快，默认500
		rowClass: 'fontColor',//滚动选中行的样式，默认：fontColor
		num: 1,//滚动选中的行序号，默认：0 表示第一行
		skip: 1,//滚动时上面留白显示的行数，默认0
		pauseOnHover: false,//鼠标经过时是否暂停，默认：true
		startOnInit: false,//初始化后是否自动运行，默认：true
		init: false,
	});
});

// ======================

function testAddLi() {
	demo.addLi("<li>第"+(demo.length+1)+"条</li>");
	console.info("已添加一行li");
}

function testRemoveLi() {
	demo.removeLi("li:last");
	console.info("已删除一行li");
}

function testUpdateOptions() {
	//demo.stop();
	var opt = {
		time: 2000,
		//num: 0,
		//skip: 0,
	};
	demo.updateOptions(opt, true);//第二个参数表示 是否立即生效
	console.info("已更新参数：time="+opt.time+"\tnum="+opt.num+"\tskip="+opt.skip);
	//demo.start();
}

function testResizeContainer() {
	$("#FontScroll").css("height", "400");
}

function testResize(type) {
	var con = $("#FontScroll");
	if(type == 'up') {
		var h = con.height()+50;
		con.css("height", h);
	} else {
		var h = con.height()-50;
		if(h <= 0) {
			h = 30;
		}
		con.css("height", h);
	}
}
</script>
</head>
<body>
<div style="width:500px; text-align:center;">
	<input type="button" value="初始化(init)" onclick="demo.init()">
	<input type="button" value="启动(start)" onclick="demo.start()">
	<input type="button" value="暂停(pause)" onclick="demo.pause()">
	<input type="button" value="继续(resume)" onclick="demo.resume()">
	<input type="button" value="停止(stop)" onclick="demo.stop()">
	<input type="button" value="销毁(destroy)" onclick="demo.destroy()">
	<input type="button" value="滚动一行(up)" onclick="demo.up()">
	<br>
	<input type="button" value="加一行li(addLi)" onclick="testAddLi()">
	<input type="button" value="减一行li(removeLi)" onclick="testRemoveLi()">
	<input type="button" value="更新参数(updateOptions)" onclick="testUpdateOptions()">
	<input type="button" value="更改容器高度" onclick="testResizeContainer()">
	<input type="button" value="增加容器高度" onclick="testResize('up')">
	<input type="button" value="减小容器高度" onclick="testResize('down')">
</div>
<div id="FontScroll" style="width:500px;height:90px;line-height:29px;border:1px solid green;overflow:hidden;margin:10px;">
    <ul style="text-align:center;width:100%;">
        <li>第1条</li>
        <li>第2条</li>
        <li>第3条</li>
        <li>第4条</li>
        <li>第5条</li>
        <li>第6条</li>
    </ul>
</div>


</body>
</html>